<template>
    <div>
        <el-row class="globalHeader" style="background-color: #eaedf1;">
            <el-col>
                <i class="el-icon-stopwatch"></i>
                实况监控
            </el-col>
        </el-row>
        <div style="margin-bottom:20px">共有{{total}}台设备正在运行</div>
        <el-row :gutter="10">
            <el-col :span="8" v-for="item in baseList" :key="item.id"  style="margin-bottom:20px">
                <el-card>
                    <div>设备序列号：{{item.deviceSerial}}</div>
                    <el-divider></el-divider>
                    <div style="height:300px">
                        <iframe :src="item.vedioUrl" frameborder="0" width="100%" height="100%" style="margin-top:5px;border:1px solid #373d41;border-radius:4px;"></iframe>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 默认基地
            baseId: this.$store.state.baseId,
            baseList:[],
            // 所监控的设备台数
            total:0
        }
    },
    created() {
        console.log(this.$store.state.baseId)
        this.getbaseList()
    },
    methods: {
        async getbaseList() {
            this.$http.get(`http://119.23.218.131:9110/monitor/trace?baseId=${this.baseId}`).then(res=>{
              console.log(res)
                if(res.status!==200) {
                    return this.$message.error('获取基地信息失败')
                }
                this.baseList = res.data.data.slice(1)
                this.total = this.baseList.length
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>